import React, { useState, useEffect } from "react";
import { Table, Tag, Button, Modal, Popover, Switch } from "antd";
import axios from "axios";
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";
export default function RightList() {
  const [dataSource, setdataSource] = useState([]);

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render(id) {
        return <b>{id}</b>;
      },
    },
    {
      title: "权限名称",
      dataIndex: "title",
    },
    {
      title: "权限路径",
      dataIndex: "key",
      render(key) {
        return <Tag color="volcano">{key}</Tag>;
      },
    },
    {
      title: "操作",
      render(item) {
        return (
          <div>
            <Button
              danger
              shape="circle"
              onClick={() => {
                confirmMethod(item);
              }}
              icon={<DeleteOutlined />}
            />
            <Popover
              content={
                <div style={{ textAlign: "center" }}>
                  <Switch
                    checked={item.pagepermisson}
                    onChange={() => {
                      switchMethod(item);
                    }}
                  ></Switch>
                </div>
              }
              title="页面配置项"
              trigger={item.pagepermisson === undefined ? "" : "click"}
            >
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                disabled={item.pagepermisson === undefined}
              />
            </Popover>
          </div>
        );
      },
    },
  ];
  const switchMethod = (item) => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1;
    setdataSource([...dataSource]);
    if (item.grade === 1) {
      axios
        .patch(`/rights/${item.id}`, {
          pagepermisson: item.pagepermisson,
        })
        .then((res) => {});
    } else {
      axios
        .patch(`/children/${item.id}`, {
          pagepermisson: item.pagepermisson,
        })
        .then((res) => {});
    }
  };
  const deteleMethod = (item) => {
    if (item.grade === 1) {
      setdataSource(dataSource.filter((data) => data.id !== item.id));
      // axios.get(`/rights/${item.id}`).then((res) => {});
    } else {
      let list = dataSource.filter((data) => data.id === item.rightId);
      list[0].children = list[0].children.filter((data) => data.id !== item.id);
      console.log(dataSource);
      setdataSource([...dataSource]);
    }
  };
  const confirmMethod = (item) => {
    Modal.confirm({
      title: "你确定要删除吗？",
      icon: <ExclamationCircleOutlined />,
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        deteleMethod(item);
      },
    });
  };
  useEffect(() => {
    axios.get("/rights?_embed=children").then((res) => {
      setdataSource(res.data);
    });
  }, []);

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination="5"
        rowKey={(item) => item.id}
      />
      ;
    </div>
  );
}
